<template>
	<div>
		<ma-body>
			<ma-refresh slot="content" :refresh="false">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div class="detailImg-box">
					<image src="../../../static/img/detailBg.png" mode="aspectFill"
						style="width: 100vw;height: 112.5vw;position: absolute;z-index: 1;"></image>
					<div class="bird">
						<image src="../../../static/img/detailBorder.png" mode="aspectFill"
							style="width: 82.93vw;height: 82.93vw;position: absolute;z-index: 3;top: 8.53vw;left: 8.53vw;">
						</image>
						<block>
							<image :src="productInfo.info.cover" mode="aspectFill"
								style="position: absolute;z-index: 2;width: 78.67vw;height: 78.67vw;top: 10vw;left: 10vw;border-radius: 6.4vw;">
							</image>
							<image src="../../../static/img/lookBig.png" mode="aspectFill"
								style="width: 6.4vw;height: 6.4vw;position: absolute;top: 12.8vw;right: 12.8vw;z-index: 6;"
								@tap.stop="lookBig(productInfo.info.cover)">
							</image>
						</block>
					</div>
				</div>
				<div class="radius-box">
					<image src="../../../static/img/enter16.png" mode="aspectFill" class="enter-img" style=""></image>
				</div>
				<div class="info-box">
					<div class="info-top">
						<div class="info-left">
							<image src="../../../static/img/indexTitle.png" mode="aspectFill" class="left-img"></image>
							<span class="left-text">{{ productInfo.info.nftMaxSupply }}份</span>
						</div>
					</div>

					<span class="info-title">{{ productInfo.info.spuTitle }}</span>

					<div class="tag-box">
						<block v-if="productInfo.info.tags">
							<span class="tag-border" v-for="item in productInfo.info.tags.split(',')">{{ item }}</span>
						</block>
					</div>

					<span class="info-desc">{{ productInfo.info.desc }}</span>

					<div class="draw-info">
						<div class="draw-money">
							<span class="money">
								<label
									style="font-size: 4.27vw;">￥</label>{{ productInfo.info.spuPrice / 100 | moneyFilter }}
							</span>
							<span class="money-price"
								style="color: #555555;text-decoration: line-through;">￥{{ productInfo.info.spuOriginPrice / 100 | moneyFilter }}</span>
						</div>

						<block v-if="detailType != 'my' && productInfo.limitTime && detailType != 'firstShop'">
							<block v-if="productInfo.limitTime.info.status == 'ing'">
								<div class="right-money">
									<span style="display: flex;align-items: center;justify-content: flex-end;">
										<image src="../../../static/img/detailEnter.png" mode="heightFix"
											style="height: 3.2vw;"></image>
										<label
											style="font-size: 3.2vw;font-weight: 300;color: #A972FF;padding-left: 1.07vw;display: block;">火热抢购中</label>
									</span>
									<!-- <u-count-down :timestamp="timestamp(productInfo.limitTime.info)" bg-color="#1b1b1bd" color="#FFCE80"
										separator-color="#FFCE80" font-size="24" separator-size="24" :show-days="false">
									</u-count-down> -->
								</div>
							</block>
							<block v-else-if="productInfo.limitTime.info.status == 'waiting'">
								<div class="right-money">
									<span style="display: flex;align-items: center;justify-content: flex-end;">
										<image src="../../../static/img/detailEnter.png" mode="heightFix"
											style="height: 3.2vw;"></image>
										<label
											style="font-size: 3.2vw;font-weight: 300;color: #A972FF;padding-left: 1.07vw;display: block;">即将开售</label>
									</span>
									<u-count-down :timestamp="timestamp(productInfo.limitTime.info)" bg-color="#1b1b1bd"
										color="#FFCE80" separator-color="#FFCE80" font-size="24" separator-size="24"
										:show-days="false">
									</u-count-down>
								</div>
							</block>
						</block>

						<!-- <div class="countDown-box">
							<span class="countDown-text">
								<image src="../../../static/img/ready.png" mode="aspectFill" class="image427"></image>
								<label class="jiu-font24-aaa" v-if="productInfo.limitTime.info.status == 'waiting'">即将开售</label>
								<label class="jiu-font24-aaa" v-else-if="productInfo.limitTime.info.status == 'ing'">正在开售</label>
							</span>
							<u-count-down :timestamp="timestamp(productInfo.limitTime.info)" bg-color="#1b1b1bd" color="#FFCE80"
										separator-color="#FFCE80" font-size="24" separator-size="24" :show-days="false"></u-count-down>
						</div> -->
					</div>

					<div class="creator-box"  @tap="toPersonHome">
						<div class="creator-left">
							<image :src="productInfo.creator.avatar" mode="aspectFill" class="creator-header">
							</image>
							<div class="creator-info">
								<span class="jiu-font28-efe">
									{{ productInfo.creator.name }} <span
										class="creator-border jiu-font10-a97">创作者</span>
								</span>
								<span class="jiu-font24-555">ID：{{ productInfo.creator.id }}</span>
							</div>
						</div>
						<image src="../../../static/img/enter16.png" mode="aspectFill" style="width: 4.27vw;height: 4.27vw;"></image>
					</div>
				</div>

				<!-- <div class="jiu-font24-555" style="text-align: center;margin: 2.67vw 0;">·· 预售流程 ··</div> -->

				<div class="jiu-font24-555" style="text-align: center;margin: 2.67vw 0;">·· 预售流程 ··</div>

				<div class="jiu-font24-555"
					style="padding: 0 2.67vw;padding-top: 2.67vw;background-color: #1b1b1b;width: 100%;color: #efefef;padding-left: 5.33vw;">
					参与人数：{{ productInfo.drawLots.startNum }}</div>

				<div class="draw-list">
					<div class="draw-item" v-for="item in timeList"
						:class="{'draw-itemType' : productInfo.drawLots.state == item.type}">
						<span class="draw-title jiu-font28-efe">{{ item.title }}</span>
						<span class="draw-day jiu-font24-555">{{ item.day }}</span>
						<span class="draw-time jiu-font24-555">{{ item.time }}</span>
					</div>
				</div>

				<div class="jiu-font24-555" style="text-align: center;margin: 2.67vw 0;">·· 藏品介绍 ··</div>

				<div class="imgList" v-html="productInfo.info.detail"></div>

				<div class="bottomText-box">
					<span class="bottomText-title">关于数字藏品</span>
					<span
						class="bottomText-text">数字藏品是指使用区块链技术，对应特定的作品、艺术品生成的唯一数字凭证，在保护其数字版权的基础上，实现真实可信的数字化发行、购买、收藏和使用。本平台的数字藏品是基于[元创链]技术协议发行的数字商品，每件藏品在[元创链]都有链上唯一标识，限量发行、不可篡改、不可复制。</span>
					<span class="bottomText-title">购买须知</span>
					<span
						class="bottomText-text">数字藏品为虚拟数字商品，并非实物，仅限经实名认证且年满18周岁的中国大陆用户购买。数字藏品的版权归发行方和原创者所有，除另外获得版权拥有者的书面同意外，用户不得将数字藏品用于任何商业用途。</span>
					<span
						class="bottomText-text">请您于10分钟内完成数字藏品支付，本商品一经出售，不支持退换。请勿对数字藏品进行炒作、场外交易、欺诈、或以任何其他非法行为进行使用。</span>
				</div>

				<block v-if="user.access_token">
					<div class="real-name" @tap="toRealName" v-if="user.myInfo.user.isReal == 0 ">
						<span class="jiu-font24-555 center" style="color: #ff9e3e;">
							<image src="../../../static/img/zhuyi.png" mode="aspectFill" class="real-img"
								style="margin-right: 1.07vw;"></image>
							购买数字藏品前需完成实名认证
						</span>
						<span class="jiu-font24-555 center" style="color: #ff9e3e;">
							前往认证
							<image src="../../../static/img/enterDetailTwo.png" mode="aspectFill" class="real-img">
							</image>
						</span>
					</div>
				</block>
			</ma-refresh>
			<bottom-box slot="footer" v-if="user.access_token">
				<div
					style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding-left: 1.33vw;width: 100%;">
					<span style="display: flex;flex-direction: column;text-align: center;align-items: center;"
						@tap="onShare">
						<image src="../../../static/img/share.png" mode="aspectFill"
							style="width: 6.4vw;height: 6.4vw;"></image>
						<label style="font-size: 2.67vw;font-weight: 300;color: #aaaaaa;">分享</label>
					</span>



					<!-- 当用户未进行抽签,或者抽签状态为结束抽签的时候,显示促销样式 -->
					<block v-if="
					 (productInfo.drawLots.state == 'end_pay' ||
					  productInfo.drawLots.state == 'open_pay') &&
					  productInfo.drawLots.state != 'unplayed'
					  ">
						<span v-if="productInfo.limitTime.info.status == 'waiting'" class="ready-btn">
							<label style="font-weight: 500;">即将开售</label>
							<label>{{ productInfo.limitTime.info.startTime | timeFilterIn }}</label>
						</span>
						<span class="buy-btn" @tap="buyModal"
							v-else-if="productInfo.limitTime.info.status == 'ing' && productInfo.info.stock != 0">立即购买￥{{ productInfo.info.spuPrice / 100 | moneyFilter }}</span>
						<span v-else-if="productInfo.info.stock <= 0  || productInfo.limitTime.info.status == 'done'"
							class="ready-btn" style="line-height: 12.8vw;padding: 0;">
							<label style="font-weight: 500;">已售罄</label>
						</span>
					</block>


					<block v-else>
						<!-- 如果返回状态为1,显示彩色按钮 -->
						<span :class="[ btnColor(productInfo) == 1 ? 'buy-btn' : 'ready-btn' ]" @tap="buyModal">
							<!-- 当用户抽签状态为pass,与抽签状态为开始购买显示该藏品价格 -->
							<label style="font-weight: 600;">
								{{ btnText(productInfo) }}
								<block v-if="productInfo.drawLotsUser">
									<span
										v-if="productInfo.drawLotsUser.state == 'pass' && productInfo.drawLots.state == 'start_pay'">{{ productInfo.skuList[0].skuPrice / 100 | moneyFilter }}</span>
								</block>
							</label>
							<!-- 当抽签状态为unplayed显示开始时间 -->
							<label
								v-if="productInfo.drawLots.state == 'unplayed'">{{ productInfo.drawLots.startTime | timeFilterIn }}</label>
							<!-- 当抽签状态为开始抽签与用户没有有抽签行为时，显示显示促销时间 -->
							<label
								v-if="productInfo.drawLots.state == 'start_pay' && !productInfo.drawLotsUser">{{ productInfo.limitTime.info.startTime | timeFilterIn }}</label>
						</span>
					</block>





				</div>
			</bottom-box>
		</ma-body>

		<block v-if="user.access_token">
			<product-poster :isCollection="detailType == 'my' ? true : false" :info="productInfo" ref="productPoster"
				:spuId="spuId"></product-poster>
		</block>
		<u-modal v-model="cancelModal" :content="content" @confirm="buy" :show-cancel-button="true"></u-modal>
		<product-modal ref="productModal"></product-modal>
		<!-- loading加载框 -->
		<loadingModal ref="loadingModal" @loadingBack="loadingBack"></loadingModal>
	</div>
</template>

<script>
	import productModal from '@/subPackA/components/product-modal/product-modal';
	import loadingModal from '@/components/loading-modal/loading-modal';
	export default {
		components: {
			productModal,
			loadingModal
		},
		data() {
			return {
				cancelModal: false,
				timeList: [{
						title: "抽签开始",
						day: "",
						time: "",
						type: "draw_lots_start"
					},
					{
						title: "抽签结束",
						day: "06/12",
						time: "",
						type: "draw_lots_end"
					},
					{
						title: "开始购买",
						day: "06/12",
						time: "",
						type: "start_pay"
					},
					{
						title: "预售结束",
						day: "06/12",
						time: "",
						type: "end_pay"
					}
				],
				productInfo: {},
				detailType: 0,
				cancelModal: false,
				content: '确定购买该数字藏品吗？',
				spuId: '',
				orderId: '',
				timer: null
			}
		},
		filters: {
			timeFilterIn(value) {
				// let val = value.substring(0,value.length-3);
				let val = value.substring(5, 16)
				// val = val.substr(0,1)
				return val;
			}
		},
		methods: {
			toPersonHome(){
				this.$ma.route.personHome({
					id: this.productInfo.creator.id,
					homeType: 'creator'
				})
			},
			loadingBack() {
				console.log('取消了')
				// clearTimeout();
				this.clearTimer();
			},
			async onPullDownRefresh() {
				this.getProductDetail(this.spuId)

				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 800);
			},
			onGuan() {
				uni.showToast({
					icon: 'none',
					title: '敬请关注'
				})
			},
			buy() {
				if (this.user.myInfo.user.isReal == 0) return uni.showToast({
					icon: 'none',
					title: '请先完成实名认证'
				});

				let data = {
					cartList: [{
						count: 1,
						skuId: this.productInfo.skuList[0].skuId
					}],
					// orderType: 'draw_lots',
				};

				console.log('状态', this.productInfo.limitTime.info.status)

				if (this.productInfo.limitTime.info.status == 'ing') {
					data['moduleId'] = this.productInfo.limitTime.info.limitTimeId;
					data['orderType'] = 'limit_time';
				} else {
					data['orderType'] = 'draw_lots';
					data['moduleId'] = this.productInfo.drawLots.id
				}

				console.log(data['orderTypr'])

				this.$u.api.onOrderSeckill(data).then(res => {
					let data = {
						orderToken: res.orderToken,
						totalPrice: this.productInfo.skuList[0].skuPrice,
					};

					// this.$u.api.onOrderSubmit(data).then(res => {
					let id = res.orderToken;
					let skuId = this.productInfo.skuList[0].skuId;
					this.orderId = res.orderToken;

					this.$u.api.onPay({}, id, skuId).then(res => {
						if (res.data == 0) {
							uni.showToast({
								icon: 'none',
								title: '购买成功'
							})
							let obj = this.productInfo;
							this.getProductDetail(this.spuId);
							setTimeout(() => {
								this.$refs.productModal.open({
									obj,
									success: async () => {
										let id;
										if (this.productInfo.info.type == 'collection')
											id = 0;
										else id = 1;
										uni.showToast({
											icon: 'none',
											title: '跳转中，请稍后'
										})
										setTimeout(() => {
											this.$ma.route.myCollection({
												currentIndex: id
											})
										}, 4000)
									}
								});
							}, 1000)
						} else if (res == 1) {
							this.getOrderGen();
						}
					}).catch(err => {
						this.getOrderGen();
					})
				}).catch(err => {
					if (err.bcode == 'ORDER_0004') {
						this.$refs.loadingModal.open({
							msg: err.msg,
							type: 'tips'
						});
					} else if (err.bcode == 'ORDER_0002') {
						this.$refs.loadingModal.open({
							msg: err.msg,
							type: 'tips'
						});
					} else if (err.bcode == 'ORDER_0006') {
						this.$refs.loadingModal.open({
							msg: err.msg,
							type: 'tips'
						});
					} else {
						this.getOrderGen();
					}
				})

			},
			getOrderGen() {
				// 调用订单查询接口
				this.$u.api.getOrderGen().then(res => {
					console.log('成功了')
					// 如调用成功关闭加载框，跳转订单确认页
					this.$refs.loadingModal.close();

					let productInfo = {
						cover: this.productInfo.info.cover,
						spuTitle: this.productInfo.info.spuTitle,
						spuPrice: this.productInfo.info.spuPrice,
						type: this.productInfo.info.type,
						tags: this.productInfo.info.tags,
						creatorId: this.productInfo.creator.id,
						spuId: this.productInfo.info.spuId
					}
					if (this.userPriority) {
						if (this.userPriority.useStatus == 'unused') productInfo["priorityId"] = this.userPriority
							.id;
					}
					this.$ma.route.buyDetail({
						productInfo: JSON.stringify(productInfo),
						orderId: this.orderId,
					})

				}).catch(err => {
					// 报错弹出对应信息的弹框
					if (err.bcode == 'ORDER_0005') {
						this.$refs.loadingModal.open({
							msg: '您已成功抢到商品，正在创建订单，请稍后…',
							type: 'loading'
						});
						// 如订单查询还未返回null，十秒后继续调用该事件
						// this.timer =  setInterval(() => {
						// 	this.getOrderGen();
						// }, 10000)
						setTimeout(() => {
							this.getOrderGen();
						}, 10000)
					} else if (err.bcode == 'ORDER_0001') {
						this.$refs.loadingModal.open({
							msg: err.msg,
							type: 'loading'
						});
						// 如订单查询还未返回null，十秒后继续调用该事件
						// this.timer = setInterval(() => {
						// 	this.getOrderGen();
						// }, 10000)
						setTimeout(() => {
							this.getOrderGen();
						}, 10000)
					} else if (err.bcode == 'ORDER_0002') {
						this.$refs.loadingModal.open({
							msg: err.msg,
							type: 'tips'
						});
					} else {
						this.$refs.loadingModal.open({
							msg: err.msg,
							type: 'loading'
						});
					}
					// 如订单查询还未返回null，十秒后继续调用该事件
					// this.timer =  setInterval(() => {
					// 	this.getOrderGen();
					// }, 10000)
				})
			},
			buyModal() {
				if (this.productInfo.drawLots.state == 'unplayed' || (this.productInfo.limitTime.info.status ==
						'waiting' && this.productInfo.drawLots.state == 'start_pay' && !this.productInfo.drawLotsUser )) {
					return;
				};


				if (this.productInfo.drawLots.state == 'draw_lots_start') {
					this.onDraw();
					return
				}
				
				console.log(455465)
				
				if(this.productInfo.limitTime.info.status != 'ing'){
					if (this.productInfo.drawLotsUser) {
						if (this.productInfo.drawLotsUser.state == 'ordered' && this.productInfo.drawLots.state == 'start_pay') {
							this.$ma.route.order();
							return;
						} else if (this.productInfo.drawLotsUser.state != 'pass') return;
					}
				}


				if (this.user.myInfo.user.isReal == 0) {
					uni.showToast({
						icon: 'none',
						title: '请先完成实名认证'
					});
					setTimeout(() => {
						this.$ma.route.realName();
					}, 1500)
					return;
				}


				this.cancelModal = true;
			},
			async getProductDetail(id) {
				let res = await this.$u.api.getProductDetail({}, id);
				this.productInfo = res;

				let time = res.drawLots;
				this.timeList[0].day = time.startTime.slice(5, 10).replace(/-/g, '/');
				this.timeList[0].time = time.startTime.slice(10, 16);

				this.timeList[1].day = time.endTime.slice(5, 10).replace(/-/g, '/');
				this.timeList[1].time = time.endTime.slice(10, 16);

				this.timeList[2].day = time.publishTime.slice(5, 10).replace(/-/g, '/');
				this.timeList[2].time = time.publishTime.slice(10, 16);

				this.timeList[3].day = time.buyTime.slice(5, 10).replace(/-/g, '/');
				this.timeList[3].time = time.buyTime.slice(10, 16);


			},
			lookBig(image) {
				uni.previewImage({
					urls: [image]
				})
			},
			onShare() {
				this.$refs.productPoster.open();
			},
			onDraw() {
				let id = this.productInfo.drawLots.id;
				this.$u.api.OnDrawLots({}, id).then(res => {
					uni.showToast({
						icon: 'none',
						title: '成功参与抽签'
					})
					this.getProductDetail(this.spuId)
				})
			},
			//销毁定时器
			clearTimer() {
				if (this.timer) clearInterval(this.timer);
			},
		},
		onLoad(e) {
			if (e.spuId) this.getProductDetail(e.spuId);
			this.spuId = e.spuId;
		},
		destroyed() {
			clearTimeout();
		},
		computed: {
			timestamp() {
				return item => {
					if (item.status == 'ing') {
						const nowTime = Date.parse(new Date());
						const activeTime = Date.parse((item.endTime).replace(/-/g, "/"));
						const time = activeTime - nowTime;
						return time / 1000;
					} else if (item.status == 'waiting') {
						const nowTime = Date.parse(new Date());
						const activeTime = Date.parse((item.startTime).replace(/-/g, "/"));
						const time = activeTime - nowTime;
						return time / 1000;
					}
				}
			},
			btnColor() {
				return item => {
					if (item.drawLots.state == 'open_pay') return '1';
					else if (item.drawLots.state == 'unplayed') return '2';
					else if (item.drawLots.state == 'draw_lots_start') {
						if (!item.drawLotsUser) {
							//还没参与抽签
							return '1';
						} else if (item.drawLotsUser.state == 'waiting') {
							//已参与抽签
							return '2';
						} else {

							//已参与抽签
							return '2';
						}
					} else if (item.drawLots.state == 'start_pay' || item.drawLots.state == 'draw_lots_end') {
						if (!item.drawLotsUser) {
							//还没参与抽签
							return '2';
						} else if (item.drawLotsUser.state == 'pass') {
							return '1';
						} else if (item.drawLotsUser.state == 'unpass') {
							//已参与抽签
							return '2';
						} else if (item.drawLotsUser.state == 'ordered') {
							//已参与抽签
							return '1';
						} else {
							return '2';
						}
						return '2';
					} else if (item.drawLots.state == 'end_pay') return '2';

					// if (item.drawLotsUser == null) {
					// 	// openPay：开放购买  unplayed未开始抽签 draw_lots_start：开始抽签 draw_lots_end：结束抽签
					// 	if (item.drawLots.state == 'open_pay') return 1;
					// 	else if (item.drawLots.state == 'unplayed') return 2;
					// 	else if (item.drawLots.state == 'draw_lots_start') return 1;
					// 	else if (item.drawLots.state == 'draw_lots_end') return 2;
					// } else {

					// 	if (item.drawLotsUser.state == 'waiting') return 2;
					// 	else if (item.drawLotsUser.state == 'end_pay') return 2;
					// 	else if (item.drawLotsUser.state == 'pass' && item.drawLots.state == 'start_pay') return 1
					// 	else if (item.drawLotsUser.state == 'unpass') return 2;
					// 	else if (item.drawLots.state == 'draw_lots_end') return 2;
					// }
				}
			},
			btnText() {
				return item => {
					if (item.drawLots.state == 'open_pay') return '立即购买';
					else if (item.drawLots.state == 'unplayed') return '即将开放抽签';
					else if (item.drawLots.state == 'draw_lots_start') {
						if (!item.drawLotsUser) {
							//还没参与抽签
							return '立即抽签';
						} else if (item.drawLotsUser.state == 'waiting') {
							//已参与抽签
							return '等待开奖';
						} else {
							//已参与抽签
							return '等待开奖';
						}
					} else if (item.drawLots.state == 'start_pay' || item.drawLots.state == 'draw_lots_end') {
						if (!item.drawLotsUser) {
							//还没参与抽签
							return '即将开售';
						} else if (item.drawLotsUser.state == 'pass') {
							return '已中签 | 支付购买￥';
						} else if (item.drawLotsUser.state == 'unpass') {
							//已参与抽签
							return '未中签';
						} else if (item.drawLotsUser.state == 'bought') {
							//已参与抽签
							return '已购买';
						} else if (item.drawLotsUser.state == 'ordered') {
							//已参与抽签
							return '待支付';
						} else {
							return '未中签';
						}
						return '结束抽签';
					}
					// else if (item.drawLots.state == 'end_pay') return '预售结束';
					// else if (item.drawLots.state == 'start_pay' || productInfo.drawLots.state == 'start_pay' && !productInfo.drawLotsUser) return '即将开售';

					// ${{this.productInfo.skuList[0].skuPrice}}
					// if (item.drawLotsUser == null) {
					// 	if (item.drawLots.state == 'open_pay') return '立即购买';
					// 	else if (item.drawLots.state == 'unplayed') return ;
					// 	else if (item.drawLots.state == 'draw_lots_start') return '立即抽签';
					// 	else if (item.drawLots.state == 'draw_lots_end') return '结束抽签';
					// 	else if (item.drawLots.state == 'end_pay') return '预售结束';
					// 	else if (item.drawLots.state == 'start_pay' || productInfo.drawLots.state == 'start_pay' && !productInfo.drawLotsUser) return '即将
					// } else {
					// 	if (item.drawLotsUser.state == 'waiting') return '等待开奖';
					// 	else if (item.drawLotsUser.state == 'end_pay') return '预售已结束';
					// 	else if (item.drawLotsUser.state == 'pass' && item.drawLots.state == 'start_pay')
					// 		return "已中签 | 支付购买￥"
					// 	else if (item.drawLotsUser.state == 'unpass') return '未中签';
					// 	else if (item.drawLots.state == 'draw_lots_end') return '结束抽签';
					// 	else if (item.drawLotsUser.state == 'bought') return '已购买';
					// }
				}
			}
		}
	}
</script>

<style lang="scss">
	.right-money {
		display: flex;
		flex-direction: column;
	}

	/deep/.wscnph {
		width: 100%;
		display: block;
	}

	.image427 {
		width: 4.27vw;
		height: 4.27vw;
	}

	.bird {
		animation: pulse 4s infinite;
		background-color: #1b1b1b;
		z-index: 99;
		position: relative;
	}

	@-webkit-keyframes pulse {
		0% {
			transfor: translateY(0);
		}

		50% {
			transform: translateY(3vw);
		}

		100% {
			transform: translateY(0);
		}
	}

	.detailImg-box {
		position: relative;
		height: 112.53vw;
	}

	.radius-box {
		height: 6.4vw;
		width: 100vw;
		border-radius: 6vw 6vw 0 0;
		background-color: #1b1b1b;
		// position: absolute;
		bottom: 0;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: flex-end;

		.enter-img {
			width: 4.27vw;
			height: 4.27vw;
			transform: rotate(90deg);
		}
	}

	.info-box {
		display: flex;
		flex-direction: column;
		padding-left: 5.33vw;
		background-color: #1B1B1B;
		padding-bottom: 8.53vw;

		.info-top {
			display: flex;
			justify-content: space-between;
			padding-right: 5.33vw;

			.info-left {
				display: flex;
				background-color: #323232;

				.left-img {
					width: 10.67vw;
					height: 4.27vw;
				}

				.left-text {
					padding: 0.27vw 1.07vw;
					font-size: 2.67vw;
					font-weight: 300;
					color: #FFCE80;
					border-radius: 0 1.07vw 1.07vw 0;
				}
			}

		}

		.info-title {
			font-size: 5.87vw;
			font-weight: 500;
			color: #ffffff;
			margin-top: 2.13vw;
		}

		.tag-box {
			display: flex;
			flex-wrap: nowrap;
			margin-top: 2.13vw;

			.tag-border {
				padding: 0.27vw 1.07vw;
				border: 1px solid #A972FF;
				font-size: 2.67vw;
				font-weight: 300;
				color: #A972FF;
				margin-right: 1.07vw;
				border-radius: 1.07vw;
			}
		}

		.info-desc {
			margin-top: 6.4vw;
			font-size: 3.2vw;
			font-weight: 300;
			color: #555555;
			padding-right: 5.33vw;
		}

		.draw-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 5.33vw;
			margin-top: 6.4vw;

			.money {
				font-weight: 500;
				color: #A972FF;
				font-size: 6.4vw;
			}

			.countDown-box {
				display: flex;
				flex-direction: column;

				.countDown-text {
					display: flex;
					align-items: center;
					justify-content: end;

					.jiu-font24-aaa {
						margin-left: 0.8vw;
					}
				}
			}
		}

		.creator-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #000;
			margin-top: 6.4vw;
			padding: 3.2vw 5.33vw 3.2vw 4.27vw;
			border-radius: 12.8vw 0 0 12.8vw;

			.creator-left {
				display: flex;
				align-items: center;

				.creator-header {
					width: 10.67vw;
					height: 10.67vw;
					border-radius: 50%;
				}

				.creator-info {
					display: flex;
					flex-direction: column;
					margin-left: 2.13vw;

					.creator-border {
						padding: 0vw 1.33vw;
						border: 1px solid #A972FF;
						border-radius: 1.07vw;
						line-height: 4.27vw;
						margin-left: 4.27vw;
					}
				}
			}

			.creator-btn {
				padding: 0 5.33vw;
				line-height: 8.53vw;
				background-color: #A972FF;
				border-radius: 5.33vw;
			}
		}
	}

	.draw-list {
		display: flex;
		justify-content: space-between;
		padding: 6.4vw 5.33vw;
		padding-right: 5.07vw;
		background-color: #1b1b1b;

		.draw-item {
			display: flex;
			flex-direction: column;
			padding: 4.27vw 6.4vw 4vw 2.13vw;
			background-color: #000;
			border-radius: 2.13vw;
			margin-right: 1.07vw;
			width: calc(100% / 4);

			.draw-title {
				width: 7.5vw;
				margin-bottom: 3.2vw;
			}
		}

		.draw-itemType {
			border: 1px solid #A972FF;

			.draw-title {
				color: #FFCE80 !important;
			}

			.draw-day,
			.draw-time {
				color: #BBBBBB;
			}
		}
	}

	.bottomText-box {
		padding: 2.13vw 5.33vw 6.4vw 5.33vw;
		background-color: #1b1b1b;
		display: flex;
		flex-direction: column;

		.bottomText-title {
			color: #aaaaaa;
			font-size: 3.73vw;
			font-weight: 500;
			margin-top: 4.27vw;
			display: block;
		}

		.bottomText-text {
			color: #555555;
			font-size: 3.2vw;
			font-weight: 300;
			margin-top: 2.13vw;
		}
	}

	.buy-btn {
		width: 100%;
		margin-left: 6.4vw;
		height: 12.8vw;
		text-align: center;
		background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
		box-shadow: 0vw 3vw 5vw rgba(71, 12, 114, 0.4800);
		border-radius: 6.4vw;
		font-size: 3.73vw;
		font-weight: 600;
		color: #000000;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.ready-btn {
		width: 100%;
		margin-left: 6.4vw;
		// padding: 1.6vw 0 1.33vw 0;
		height: 12.8vw;
		justify-content: center;
		// text-align: center;
		border-radius: 6.4vw;
		background-color: #555555;
		font-size: 3.73vw;
		font-weight: 300;
		color: #BBBBBB;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
